<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.ico">

<meta charset="UTF-8">
<title>VRD中心展示</title>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <link rel="stylesheet" type="text/css"
	href="bootstrap3/css/bootstrap.css"> -->
<link rel="stylesheet"
  href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
  href="bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<style type="text/css">
body {
	background-color: white;
	padding-top: 20px;
}

navbar {
	border: 0;
}

#logo {
	position: relative;
	top: -10px;
}
/* 导航栏鼠标悬停时为黄色 */
.nav.navbar-nav>li>a:hover {
	color: #ffc600;
}
h3{
  color: #ffc600;
  position: absolute;
  left: 43%;
  top: -7px;
}

#back{
  position: relative;
  left: -10px;
}

/* 给图片添加缩放动画 */
img {
	transition-duration: 1s;
}

img:hover {
	transform: scale(1.2); /* 鼠标移入时缩放1.2倍大小 */
}

.grid-item {
	overflow: hidden; /* 为了实现缩放超出的内容不显示 */
}
.submit_div{
  width: 300px;
}
.submit_file{
  float: left;
  width: 200px;
}
</style>
</head>
<body>
  <header>
    <!-- 头部居中 -->
    <!-- logo -->
    <div class="container">
      <nav class="navbar navbar-default">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"> <img id="logo"
            alt="Brand" src="images/logo.png">
          </a>
        </div>
        <!-- 修改轮播图标题 -->

        <h3 class="text-center">修改轮播图</h3>

        <ul class="nav navbar-nav navbar-right">
          <li><a id="back" href="HomeServlet">返回首页</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!--主题  -->
  <section>
    <div class="container" style="margin-top: 10px;">
      <!-- <div>
        <h2 class="text-center">当前轮播图片</h2>
      </div> -->
      <div th:each="b:${list}" style="margin-top: 20px;">
        <img th:src=${b.imgPath} class="img-responsive">
        <!-- <a th:href="'ShowUpdateBannerServlet?id='+${b.id}" class="btn btn-info">替换</a> -->
        <a th:href="'DelBannerServlet?id='+${b.id}"
          class="btn btn-danger">删除</a>
      </div>
      <hr>
      <!-- 添加轮播图 -->
      <div class="well">
          <form action="AddBannerServlet" method="post" 
            enctype="multipart/form-data">
              <h2 class="text-center">添加轮播图</h2>
              <div class="container submit_div">
                <input type="file" name="file" class="submit_file" id="file">
                <input type="submit" class="btn btn-info submit_btn" value="添加">
              </div>
          </form>
      </div>
    </div>
  </section>

  <footer class="well container">
    <b>Copyright © 2018 Tedu.cn All Rights Reserved
      京ICP备08000853号-56 <a href="#">虚拟偶像培养有限科技公司</a> 版权所有
    </b>
    <!-- 内容要显示到右侧pull-right 等效float:right -->
    <span class="pull-right"><b>Version</b> 0.1.0</span>
  </footer>

</body>
<script type="text/javascript" src="bootstrap3/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap3/js/holder.js"></script>
<script type="text/javascript" src="bootstrap3/js/html5shiv.min.js"></script>
<script type="text/javascript" src="bootstrap3/js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="bootstrap3/js/respond.min.js"></script>
<!-- 引入瀑布流相关框架文件 -->
<script type="text/javascript" src="js/imagesloaded.pkgd.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>

<script>
	$(".submit_btn").click(function(){
		//在事件中return false可以终止事件
		if($("#file").val()==""){
			alert("请选择上传文件！");
			return false;
		}
	})
</script>
</html>

















